<template>
  <div class="home">

    <div class="line"></div>
    <el-menu
        :default-active="activeIndex2"
        :default-openeds="defaultOpeneds"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
    >


      <el-menu-item index="1" default-active="/Announcement"><a href="/Announcement">首页</a></el-menu-item>
      <el-menu-item index="4"><a href="/ProjectForm">项目注册</a> </el-menu-item>
      <el-menu-item index="3"><a href="/Login">登录</a></el-menu-item>
      <el-menu-item index="2"><a href="/Register">注册</a></el-menu-item>

      <el-submenu index="2-4">
        <template slot="title"><i style="color: #222222;">{{ nickname }}</i></template>
        <el-menu-item index="2-4-1"><a href="/UpdateOneself"><i style="color: #222222;">修改信息</i></a></el-menu-item>
        <el-menu-item index="2-4-2"><a href="/ResetPassword"><i style="color: #222222;">重置密码</i></a></el-menu-item>
        <el-dropdown-item @click.native="logout"><i style="color: #222222;">退出登录</i></el-dropdown-item>

      </el-submenu>


    </el-menu>

    <el-main class="content">
      <router-view></router-view>
    </el-main>
  </div>
</template>


<script>
export default {
  data() {
    return {
      defaultOpeneds: ['1'],
      activeIndex: '1',
      activeIndex2: '1',
      nickname:'',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout() {
      let _this = this;
      this.$confirm('注销登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        localStorage.removeItem('access-admin')
        _this.$router.replace({path: '/login'})
      }).catch(()=>{})
    }
  },
  created() {
    this.nickname= JSON.parse(window.localStorage.getItem('access-admin')).nickname;
  }

}
</script>

<style>
.home {
  background-size: cover;
}


.content {
  padding: 20px;
  color: #333;
}
</style>